<script lang="ts">
  export default {
    name: 'KtPaging',
  };
</script>
<script setup lang="ts">
  import {
    defineProps, PropType, reactive, toRefs,
  } from 'vue';

  const props = defineProps({
    pageNo: {
      type: Number,
      required: true,
    },
    pageSize: {
      type: Number,
      required: true,
    },
    count: {
      type: Number,
      required: true,
    },
    pageOptions: {
      type: Object as PropType<Partial<KtTable.Pagination>>,
      default: () => {},
    },
  });

  const emit = defineEmits(['update:pageNo', 'update:pageSize']);

  function pageChange(page) {
    emit('update:pageNo', page);
  }

  function sizeChange(current, size) {
    emit('update:pageSize', size);
  }

  const pageOption = reactive<KtTable.Pagination>({
    disabled: false,
    hideOnSinglePage: false,
    pageSizeOptions: ['5', '8', '10', '20'],
    showQuickJumper: true,
    showSizeChanger: true,
    showCounter: true,
    ...props.pageOptions,
  });
</script>

<template>
  <div class="flex justify-between items-center p-5">
    <div v-if="pageOption.showCounter">
      <span>
        共
      </span>
      <span class="text-main-1">
        {{ count }}
      </span>
      <span>
        条记录
      </span>
    </div>
    <div v-else />
    <a-pagination
      :current="pageNo"
      :page-size="pageSize"
      :total="count"
      :disable="pageOption.disabled"
      :show-quick-jumper="pageOption.showQuickJumper"
      :show-size-changer="pageOption.showSizeChanger"
      :page-size-options="pageOption.pageSizeOptions"
      :hide-on-single-page="pageOption.hideOnSinglePage"
      @change="pageChange"
      @showSizeChange="sizeChange"
    />
  </div>
</template>

<style lang="less">
.ant-pagination-item-active {
  background: var(--mainColor1);
  border: none;

  > a {
    color: #fff;
  }
}
</style>
